
<!-- 给宝宝的花花 -->
<!--
<!DOCTYPE html>
<html>
  <script src="./aframe.min.js"></script>
  <script src="./aframe-ar.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
  
        <a-entity
         id="model"
          position="0 0 0"
          rotation="270 180 180"
          scale="0.1 0.1 0.1"
          gltf-model="./1.gltf"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>  -->
<!--
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>cxy geo</title>
    <script src="./aframe.min.js"></script>
    <script src="./aframe-look-at-component.min.js"></script>
    <script src="./aframe-ar-nft.js"></script>
    <script src="./vue.js"></script>
    <script>
      window.onload = () => {
        const app = new Vue({
          el: '#app',
          data: {
            name:"123",
            latitude: null,
            longitude: null
          },
          mounted() {
            // 获取当前位置
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(
                (position) => {
                  const latitude = position.coords.latitude
                  const longitude = position.coords.longitude

                  // 将位置赋值给Vue实例中的变量
                  this.latitude = latitude
                  this.longitude = longitude
                  alert(    this.latitude )
                },
                (error) => {
                  console.log(error)
                }
              )
            } else {
              console.log('Geolocation is not supported by this browser.')
            }
          }
        })
      }
    </script>
  </head>
  <body style="margin: 0; overflow: hidden;">
    <div id="app">
      <a-scene
        vr-mode-ui="enabled: false"
        embedded
        arjs="sourceType: webcam; debugUIEnabled: false;"
      >
      
         <a-entity
         id="model"
          position="0 0 0"
          rotation="270 180 180"
             look-at="[gps-camera]"
          scale="0.1 0.1 0.1"
               :gps-entity-place="{'latitude':  latitude , 'longitude':  longitude }"
          gltf-model="./1.gltf"
        ></a-entity>
        <a-camera gps-camera rotation-reader></a-camera>
      </a-scene>
    </div>
  </body>
</html>-->

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> AR.js demo</title>
    <script src="./aframe.min.js"></script>
    <script src="./aframe-look-at-component.min.js"></script>
    <script src="./aframe-ar-nft.js"></script>
    <script>
      window.onload = () => {                      
         navigator.geolocation.getCurrentPosition((position) => {

        document.querySelector('a-text').setAttribute('gps-entity-place', `latitude: ${position.coords.latitude}; longitude: ${position.coords.longitude};`)
      });
     }
    </script>
  </head>

  <body style="margin: 0; overflow: hidden;">
    <a-scene
      vr-mode-ui="enabled: false"
      embedded
      arjs="sourceType: webcam; debugUIEnabled: false;"
    >
      <a-text
        value="No markers around"
        look-at="[gps-camera]"
        scale="5 5 5"
      ></a-text>
      <a-camera gps-camera rotation-reader> </a-camera>
    </a-scene>
  </body>
</html>